{% load staticfiles %}
{% include "header.html" %}
<div class="container detail-box">
    <div class="detail-left-box">

        <div class="detail-left">
            <div class="article-title-box">
                <a class="article-title">{{ article.title }}</a>
                <a class="article-auther">作者：{{ article.auther.name }} 时间：{{ article.create_date|date:"Y-m-d  H:i" }}</a>
            </div>
            {{ article.content|safe }}
            <div style="width: 100%;text-align: center">
                <div style="display: inline-block;margin-right: 50px">
                    <img class="{{ article.like|yesno:"like-active,," }}" id="detail-like"
                         style="width: 60px;height: 55px" src="/static/images/like_gray.png" style="margin: 0 auto">
                    <a style="display: block;margin-top: 20px;font-size: 20px;text-decoration: none;color: gray;margin-bottom: 20px">点赞 {{ article.get_like_count }}</a>
                </div>
                <div style="display: inline-block">
                    <img class="{{ article.collect|yesno:"collect-active,," }}" id="detail-collect"
                         style="width: 65px;height: 65px" src="/static/images/collect_gray.png" style="margin: 0 auto">
                    <a style="display: block;margin-top: 20px;font-size: 20px;text-decoration: none;color: gray;margin-bottom: 20px">收藏 {{ article.get_collect_count }}</a>
                </div>
            </div>

        </div>
        <div class="detail-left">
            <a class="comment-header">评论({{ comments|length }})</a>
            {% csrf_token %}
            <form class="article-comment" action="/article/comment/" method="post">
                <textarea class="article-comment-input" type="text" name="text"></textarea>
                <input type="hidden" name="article_id" value="{{ article.id }}">
                <input class=" article-comment-submit edit-submit" type="submit" value="评论">
            </form>
            <div class="line"></div>
            {% for comment in comments %}
                <div class="comment-box">

                    {% if comment.user.icon %}
                        <a href="/user/{{ comment.user.username }}">
                            <img class="comment-icon" src="/media/{{ comment.user.icon }}">
                        </a>
                    {% else %}
                        <img class="comment-icon" src="{% static "icon.jpg" %}">
                    {% endif %}
                    <div class="comment-name-box">
                        {% if comment.user.name %}
                            <a href="/user/{{ comment.user.username }}" class="comment-name">{{ comment.user.name }}</a>
                        {% else %}
                            <a class="comment-name">游客</a>
                        {% endif %}
                        <a class="comment-time"> · {{ comment.pub_date|date:"Y-m-d  H:i" }}</a>
                    </div>
                    <a class="comment-content">{{ comment.text }} </a>
                </div>
            {% endfor %}


        </div>


    </div>

    <div class="detail-right-box">

        <div class="detail-right middle">
            <a href="/user/{{ article.auther.username }}">
                {% if user_all.icon %}
                    <img class="detail-user-icon" src="/media/{{ article.auther.icon }}">
                {% else %}
                    <img class="detail-user-icon" src="/static/images/icon.jpg">
                {% endif %}
            </a>
            <a href="/user/" class="detail-user-name">{{ article.auther.name }}</a>
            <a href="/user/" class="detail-user-text">{{ article.auther.text }} </a>
            <div id="detail-follow" class="detail-follow">
                <a id="detail-follow-status">关注</a>
            </div>

        </div>


        <div class="detail-right">
            <a class="recommend-header">热门推荐</a>
            {#        <div class="line"></div>#}
            {% for recommend in recommends %}
                <div class="recommend-item">
                    <a  href="/article/{{ recommend.id }}" class="recommend-title">{{ recommend.title }}</a>
                    <div class="recommend-images">
                        {% for image in recommend.get_image_list|slice:":3" %}
                            <a href="/article/{{ recommend.id }}/">
                            <img class="recommend-image" src="{{ image }}">
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}


        </div>
    </div>

</div>

</div>
{% load staticfiles %}
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    (function () {
        autherFollowing = {{ article.auther.following }};
        if (autherFollowing) {
            $('#detail-follow-status').text("已关注");
        } else {
            $('#detail-follow-status').text("关注");
        }

        $('.nav__trigger').on('click', function (e) {
            e.preventDefault();
            $('.nav').toggleClass('nav-active-x');
            $('#nav_trigger_parent').toggleClass('nav-trigger-active')
        });

        if ($('#detail-like').hasClass('like-active')) {
            $('#detail-like').attr('src', '/static/images/like_red.png');
        } else {
            $('#detail-like').attr('src', '/static/images/like_gray.png');
        }

        $('#detail-like').on('click', function (e) {
            e.preventDefault();
            $(this).toggleClass('like-active');
            url = ''
            if ($(this).hasClass('like-active')) {
                $(this).attr('src', '/static/images/like_red.png');
                url = '/action/like'
            } else {
                $(this).attr('src', '/static/images/like_gray.png');
                url = '/action/unlike'
            }
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                data: {
                    'article_id': '{{ article.id }}'
                },
                success: function (data, status, xhr) {
                    console.log(status + 'like success');
                },
                error: function (xhr, status) {
                    console.log(status + 'like Error');
                }
            })
        });

        if ($('#detail-collect').hasClass('collect-active')) {
            $('#detail-collect').attr('src', '/static/images/collect_red.png');
        } else {
            $('#detail-collect').attr('src', '/static/images/collect_gray.png');
        }

        $('#detail-collect').on('click', function (e) {
            e.preventDefault();
            $(this).toggleClass('collect-active');
            url = ''
            if ($(this).hasClass('collect-active')) {
                $(this).attr('src', '/static/images/collect_red.png');
                url = '/action/collect'
            } else {
                $(this).attr('src', '/static/images/collect_gray.png');
                url = '/action/uncollect'
            }
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                data: {
                    'article_id': '{{ article.id }}'
                },
                success: function (data, status, xhr) {
                    console.log(status + 'like success');
                },
                error: function (xhr, status) {
                    console.log(status + 'like Error');
                }
            })
        });


        $('#detail-follow').on('click', function (e) {
            url = ''
            if (autherFollowing) {
                url = '/action/unfollow/'
            } else {
                url = '/action/follow/'
            }
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                data: {
                    'user_id': '{{ article.auther.id }}'
                },
                success: function (data, status, xhr) {
                    if (data) {
                        if (autherFollowing) {
                            $('#detail-follow-status').text("关注");
                            autherFollowing = false;
                        } else {
                            $('#detail-follow-status').text("已关注");
                            autherFollowing = true;
                        }
                    }
                },
                error: function (xhr, status) {
                    console.log(status + 'follow Error');
                }
            })
        });
    }())
</script>

<script type="text/javascript">
    if (window !== top) top.location = window.location;
</script>
</body>
</html>